<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content">{{title}}</p>
    </Yq-header>
    <div style="width: 100%;height: 38px;"><span>&nbsp;&nbsp;</span></div>
    <checker
      v-model="vipSel"
      default-item-class="demo5-item"
      selected-item-class="demo5-item-selected"
    >
      <checker-item v-for="vipList in vipList" :value="vipList.itemId">
        <div class="vipListBox">
          <p style="color: #f95320;font-size: 18px;">{{vipList.vipStr}}</p>
          <p style="color: #636363;font-size: 15px;" v-if="vipList.payType!==''&&vipList.payType === 1">¥{{vipList.nowPrice}}</p>
          <p style="color: #636363;font-size: 15px;" v-if="vipList.payType!==''&&vipList.payType === 2">{{vipList.pointPrice}}积分</p>
          <p style="color: #a9a9a9;font-size: 12px;">{{vipList.name}}</p>
        </div>
      </checker-item>
    </checker>
    <flexbox>
      <x-button v-if="xufei!==true" type="primary" @click.native="getMemberFn" action-type="button" style="width: 40%;background: #3d82e5;margin: 20px auto 0 auto;font-size: 13px;">立即开通</x-button>
      <x-button v-if="xufei===true" type="primary" @click.native="getMemberFn" action-type="button" style="width: 40%;background: #3d82e5;margin: 20px auto 0 auto;font-size: 13px;">立即续费</x-button>
    </flexbox>
    <group title="会员权益">
      <ul style="font-size: 11px;padding: 10px 15px;list-style: none;color: #666">
        <li>1、尊享7×24小时电话医生、预约挂号服务;</li>
        <li>2、全场商品及服务均享受9折优惠;</li>
        <li>3、1元消费积1个积分(消费以实际支付金额为准，不足1元部分不作计算);</li>
        <li>4、独享积分、余额提现权益;</li>
      </ul>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, XButton, Flexbox, FlexboxItem, Checker, CheckerItem, Alert } from 'vux'
  import * as urls from '../../../../api/urls'
  import * as types from '../../../../store/types'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      Flexbox,
      FlexboxItem,
      Checker,
      CheckerItem,
      YqHeader,
      Alert
    },
    data () {
      return {
        show: false,
        message: '',
        title: '开通会员',
        xufei: false,
        vipSel: 1,
        vipType: '',
        vipList: []
      }
    },
    methods: {
      onHide () {
        if (this.message === '请先绑定手机号') {
          this.$router.push({
            path: '/UserInformation'
          })
          this.$router.go(1)
        }
      },
      onShow () {
        console.log('on show')
      },
      getMemberFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.userIndex, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.user.tel !== '' && res.data.user.tel !== null && res.data.user.tel !== undefined) {
              that.vipList.forEach(function (item) {
                if (that.vipSel === item.itemId) {
                  that.$store.commit(types.USER_ORDER, {vip: {itemId: item.itemId, payType: item.payType, price: item.nowPrice, point: item.pointPrice}})
                  if (item.payType === 2) {
                    that.$router.push({
                      path: '/member/PayMember'
                    })
                    that.$router.go(1)
                  } else {
                    that.http(urls.buyVip, {userId: userId, itemId: item.itemId}, function (res) {
                      if (res.status === 100) {
                        that.$router.push({
                          path: '/shoppingCar/shoppingBuy',
                          query: {
                            money: '',
                            useScore: '',
                            mianOrderId: res.data.orderMain.id,
                            isVip: true
                          }
                        })
                        that.$router.go(1)
                      } else {
                        that.show = true
                        that.message = res.errMsg
                      }
                    }, function (res) {
                      that.show = true
                      that.message = '服务器错误，请稍后重试'
                    })
                  }
                }
              })
            } else {
              that.show = true
              that.message = '请先绑定手机号'
            }
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res
        })
      },
      getVipList () {
        let that = this
        that.http(urls.vipItem, {}, function (res) {
          if (res.status === 100) {
            if (res.data.data.length !== 0) {
              that.vipList = res.data.data
              that.vipSel = res.data.data[0].itemId
            }
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      weixinfn26 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.xufei = this.$store.state.userInfo.xufei
      if (this.xufei === true) {
        this.title = '续费会员'
      }
      this.getVipList()
      this.weixinfn26()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    background-clip: padding-box;
    border: solid 1px grey;
    margin: 8px 5px ;
  }
  .demo5-item {
    width: 46.25%;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin: 8px 5px 0 5px;
  }
  .demo5-item-selected {
    background: #ffffff url(../../../../assets/images/user/member_icon.png) no-repeat right bottom;
    background-size: 25px;
    border-color: #3d82e5;
  }
  .vipListBox>p{
    margin-left: 10px;
  }
  .vipListBox>p:nth-child(1){
    color: #ef8616;
    font-size: 20px;
  }
  .vipListBox>p:nth-child(3){
    color: grey;
    font-size: 10px;
  }
</style>
